<template>
  <el-card shadow="always">
    <!---- -- -- -- 头部-- -- -- -- -- -- -->
    <div slot="header">
      <!-- 路径导航 -->
       <Breadcrumb/>
    </div>
    <!---- -- -- -- 内容区域-- -- -- -- -- -- -->
    <!-- 筛选区域 -->
    <div class="filter-box">
      <div class="lt"></div>
      <div class="rt">
        <el-button type="primary"
                   size="small"
                   icon="el-icon-plus" @click="isAddShow=true">增加</el-button>
      </div>
    </div>
    <!-- 表格区域 -->
    <div class="table-box">
      <!-- 4.渲染表格 -->
      <zk-table ref="table"
                index-text="#"
                :data="list"
                :columns="columns"
                :selection-type="false"
                :show-index="true"
                :expand-type="false"
                :tree-type="true">
        <!-- 有效列 -->
        <template slot="canuse"
                  slot-scope="scope">.
          <i v-if="scope.row.cat_deleted" class="el-icon-error"></i>
          <i v-else class="el-icon-success"></i>
        </template>
        <!-- 层级列 -->
        <template slot="level"
                  slot-scope="scope">
          <el-tag size="small" v-if="scope.row.cat_level==0" type="primary">一级</el-tag>
          <el-tag size="small" v-if="scope.row.cat_level==1" type="success">二级</el-tag>
          <el-tag size="small" v-if="scope.row.cat_level==2" type="warning">三级</el-tag>
        </template>
        <!-- 操作列 -->
        <template slot="action">
          <el-button circle type="success" size="small" icon="el-icon-edit"></el-button>
          <el-button circle type="danger" size="small" icon="el-icon-delete"></el-button>
        </template>
      </zk-table>

      <!-- 分页器 -->
   <Pageination @sizechange="sizeChange"
                  @pagechange="currentChange"
                  :total="total"
                  :pagenum="pagenum"
                  :pagesize="pagesize"></Pageination>

    </div>

    <!-- 增加的弹框 -->
    <el-dialog
      title="增加分类"
      :visible.sync="isAddShow"
      @close="resetFields"
      width="30%">
     <el-form :model="addFormData"  label-width="80px" :inline="false" size="normal">
       <el-form-item label="分类名" required>
         <el-input v-model="addFormData.cat_name"></el-input>
       </el-form-item>
        <el-form-item label="上级分类">
          <!-- v-model表示绑定给数据变量 -->
          <!-- options 表示级联选择器的数据    默认文字是 label 字段   数据 是value字段 -->
             <el-cascader
              v-model="chooseCateId"
              :options="allCateList"
              :props="{label:'cat_name',value:'cat_id',checkStrictly:true}"
              ></el-cascader>
       </el-form-item>
     </el-form>
      <span slot="footer">
        <el-button @click="isAddShow = false">Cancel</el-button>
        <el-button type="primary" @click="addCateSubmit">OK</el-button>
      </span>
    </el-dialog>

  </el-card>
</template>

<script>
export default {
  name: 'Categories',
  data () {
    return {
      // 1. 定义表格变量
      list: [],
      total: 0,
      pagenum: 1,
      pagesize: 10,
      columns: [
        { label: '分类名', prop: 'cat_name' },
        { label: '是否有效', type: 'template', template: 'canuse' },
        { label: '层级', type: 'template', template: 'level' },
        { label: '操作', type: 'template', template: 'action' }
      ],
      isAddShow: false,
      addFormData: {
        cat_name: '' // 分类名
      },
      allCateList: [], // 所有分类数据
      chooseCateId: [] // 级联选择器绑定变量
    }
  },
  computed: {
    // 层级
    cat_level () {
      return this.chooseCateId.length
    },
    // 父级ID
    cat_pid () {
      if (!this.chooseCateId.length) return 0
      return this.chooseCateId[this.chooseCateId.length - 1]
    }
  },
  created () {
    // 3. 调用方法
    this.getCateList()
  },
  methods: {
    // 2.获取商品分类数据库
    async getCateList () {
      // 发送请求
      // 获取分页
      const { data: res } = await this.$axios.get('/categories', {
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize
        }
      })
      // 获取所有
      const { data: res2 } = await this.$axios.get('/categories')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.list = res.data.result
      this.total = res.data.total
      this.allCateList = res2.data
    },
    // 每页数量更换事件
    sizeChange (val) {
      this.pagesize = val
      this.getCateList()
    },
    // 页码更换事件
    currentChange (val) {
      this.pagenum = val
      this.getCateList()
    },
    // 添加分类
    async addCateSubmit () {
      if (!this.addFormData.cat_name) return this.$message.warning('请输入分类名')
      const { data: res } = await this.$axios.post('/categories', {
        cat_pid: this.cat_pid,
        cat_level: this.cat_level,
        cat_name: this.addFormData.cat_name
      })
      if (res.meta.status !== 201) return this.$message.error(res.meta.msg)
      this.$message.success(res.meta.msg)
      this.isAddShow = false
      this.resetFields()
      this.getCateList()
    },
    // 重置表单信息
    resetFields () {
      this.addFormData.cat_name = ''
      this.chooseCateId = []
    }
  }
}
</script>

<style>

</style>
